<template>
  <div id="conpon">
    <top-bar :title="title">
      <div slot="right" class="exchangetext" @click="exchangeCode">兑换优惠券</div>
    </top-bar>
    <div v-if="isShow" style="padding-top:5px;">
      <div class="conpon_list" v-for="(item,index) in conponData" :key="index">
        <div class="conpon_list_left">
          <p class="conponMoney" v-if="item.money_type=='1'">
            <span>{{item.money}}</span>元
          </p>
          <p class="conponMoney" v-else>
            <span>{{item.money}}</span>折
          </p>
          <p class="conponMoneyText">{{item.use_limit}}</p>
        </div>
        <div class="conpon_list_right">
          <p class="conponText">{{item.coupon_title}}</p>
          <p class="conponName">{{item.use_scope}}</p>
          <p class="conponTime">{{timestampToTime(item.useful_time_begin)}}-{{timestampToTime(item.useful_time_end)}}</p>
        </div>
        <div style="clear:both"></div>
        <div class="conpon_list_bottom">
          <p>{{item.remark}}</p>
        </div>
      </div>
      <p class="conpon_number">
        没有更多可用优惠券了
        <span @click="conponOut">
          查看过期券
          <md-icon name="yhq_next" slot="right" class="yhq_next"></md-icon>
        </span>
      </p>
      <p class="conponBtn" @click="getConponMore">获得更多优惠券</p>
    </div>
    <div v-else>
      <p class="conponNo">
        <img src="@/assets/imgs/yhq_kb.png" />
      </p>
      <p class="conpon_number">
        没有更多可用优惠券了
        <span @click="conponOut">
          查看过期券
          <md-icon name="yhq_next" slot="right" class="yhq_next"></md-icon>
        </span>
      </p>
      <p class="conponmore" @click="getConponMore">获得更多优惠券</p>
    </div>
  </div>
</template>
<script>
import '@/assets/svgs/yhq_next.svg';
import { Tabs, TabBar, Icon, Dialog, Toast } from 'mand-mobile';
import TopBar from '@/components/TopBar';
import Loading from '@/components/loading';
import { decryptByDESModeEBC, encryptByDESModeEBC } from '@/common/encrypt';
import http from '@/common/http';
import Utils from '@/common/pakjUtils';
import Config from '@/common/config';
export default {
  components: {
    [Tabs.name]: Tabs,
    [Icon.name]: Icon,
    [TopBar.name]: TopBar,
    [TabBar.name]: TabBar,
    [Toast.name]: Toast
  },
  data() {
    return {
      title: '我的优惠券',
      isShow: true,
      conponData: []
    };
  },
  created() {
    let str = localStorage.getItem('USER_INFO');
    let userobj = JSON.parse(str);
    let params = {
      tk: userobj.token,
      status_id: '0'
    };
    Loading.show();
    http.post('pakj/coupon/getMyCouponList', params).then(res => {
      Loading.hide();
      if (res.data.code === '000000') {
        if (res.data.data.length === 0) {
          this.isShow = false;
        }
        this.conponData = res.data.data;
        console.log(res.data);
      } else {
        Dialog.alert({
          title: '提示',
          content: res.data.msg,
          confirmText: '确定'
        });
      }
    });
  },
  methods: {
    conponOut() {
      this.$router.push({
        name: 'MyCouponOut'
      });
    },
    // 兑换优惠券
    exchangeCode() {
      this.$router.push({
        name: 'MyCouponExchange'
      });
    },
    getConponMore() {
      let str = localStorage.getItem('USER_INFO');
      let userobj = JSON.parse(str);
      window.location.href =
        Config.pageUrl + 'pakjspa/#/share-for-reward/index?tk=' + userobj.token + '&id=' + userobj.user_id + '&userType=' + '4';
    },
    timestampToTime(timestamp) {
      var date = new Date(timestamp);
      var Y = date.getFullYear() + '-';
      var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
      var D = date.getDate() + ' ';
      // h = date.getHours() + ':';
      // m = date.getMinutes() + ':';
      // s = date.getSeconds();
      return Y + M + D;
    }
  }
};
</script>
<style lang="stylus" scoped>
p {
  display: block;
  margin-block-start: 0px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

#conpon {
  height: 100vh;
  background-color: color-primary-background;
}

.exchangetext {
  color: #666;
  font-size: 28px;
}

.conpon_list {
  margin: 20px 30px 0px 30px;
  background-color: #fff;
  border-top: 6px #FF6917 solid;
  border-radius: 7px;
}

.conpon_list_left {
  float: left;
  margin-left: 30px;
  margin-top: 30px;
}

.conpon_list_right {
  float: left;
  margin-top: 24px;
  margin-left: 60px;
}

.conpon_list_bottom {
  margin-top: 26px;
  margin-left: 18px;
  margin-right: 18px;
  font-size: 22px;
  color: #999;
  padding-bottom: 20px;
}

.conponMoney {
  color: #FF6917;
  font-size: 28px;
}

.conponMoney span {
  font-size: 64px;
}

.conponMoneyText {
  font-size: 24px;
  color: #666;
}

.conponText {
  font-size: 32px;
  color: #ff6917;
}

.conponName {
  font-size: 26px;
  color: #333;
  margin-top: 10px;
}

.conponTime {
  font-size: 24px;
  color: #999;
  margin-top: 12px;
}

.conpon_number {
  margin-top: 34px;
  color: #999;
  font-size: 24px;
  text-align: center;
}

.conpon_number span {
  margin-left: 10px;
  border-left: solid 1px #ccc;
  padding-left: 10px;
}

.conponBtn {
  margin: 80px 96px 0px 96px;
  height: 98px;
  line-height: 98px;
  color: #666;
  font-size: 32px;
  text-align: center;
  background: rgba(255, 255, 255, 1);
  border-radius: 10px;
  border: 2px solid #ccc;
}

.conponmore {
  margin: 80px 96px 0px 96px;
  height: 98px;
  line-height: 98px;
  color: #fff;
  font-size: 32px;
  text-align: center;
  background-color: #ff6917;
  border-radius: 10px;
}

.conponNo {
  padding-top: 150px;
  text-align: center;
}

.conponNo img {
  width: 50%;
}

.yhq_next {
  position: relative;
  left: 8px;
  top: 1px;
  width: 18px;
  height: 20px;
}
</style>
